<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .banner {
            width: 1500vw;
            height: 80px;
            background-color: #D43B33;
        }
        .icon {
            display: inline-block;
            width: 500vw;
            height: 60px;
        }
        .downApp {
            display: inline-block;
            width: 95px;
            height: 38px;
            border-radius: 25px;
            margin-left: 30vw;
            text-align: center;
            background-color: white;
            color: #D43B33;
        }
        .doA {
            padding-bottom: 10px;
        }
        .doB {
            display: inline-block;
            margin-left: 12vw;
            
        }
        #a {
            color: #D43B33;
        }
        #b {
            color: rgb(99, 98, 98);
        }
        .xaHa {
            background-color: #D43B33;
            width: 65px;
            height: 2px;
            margin-left: 12vw;
        }
        .reCb {
            color: rgb(99, 98, 98);
        }
        .dB {
            height: 40vw;
            width: 30vw;
        }
        .geQu {
            width: 300px;
            margin-top: 5vw;
        }
        .gName {
            margin: 0;
            padding: 0;
            color: rgb(99, 98, 98);
        }
        .gSin {
            line-height: 20px;
            margin-top: 1px;
            font-size: 1vw;
            color: rgb(150, 148, 148);
        }
    </style>
</head>
<body>
    <div class="banner">
        <div class="icon">
            <img src="../picture/iconw.png" width="145vw" height="60vw">
            <div class="downApp">
                <p class="doA">下载APP</p>
            </div>
        </div>  
    </div>

    <div class="option">
        <p class="doB" id="a">推荐音乐</p>
        <p class="doB" id="b">热歌榜</p>
        <p class="doB" id="b">搜索</p>
    </div>
    <div class="xaHa"></div>
    <p class="reCb">编辑推荐</p>
    <div class="picT">
        <img class="dB" src="../picture/w1.png" >
        <img class="dB" src="../picture/w2.png" >
        <img class="dB" src="../picture/w3.png" >
        <img class="dB" src="../picture/w4.png" >
        <img class="dB" src="../picture/w5.png" >
        <img class="dB" src="../picture/w6.png" >
    </div>
    <p class="reCb">最新音乐</p>
    <div class="geQu">
        <p class="gName">Try</p>
        <p class="gSin">Colbie Caillat-Seven In The Morning</p>
    </div>
    <div class="geQu">
        <p class="gName">答案</p>
        <p class="gSin">杨坤/郭采洁-今夜二十岁</p>
    </div>
    <div class="geQu">
        <p class="gName">golden hour</p>
        <p class="gSin">JVKE-golden hour</p>
    </div>
    <div class="geQu">
        <p class="gName">白媚声</p>
        <p class="gSin">Ice Paper/孤失-食色性也</p>
    </div>
    <div class="geQu">
        <p class="gName">Summertime Sadness</p>
        <p class="gSin">Lana Del Ray-Born To Die</p>
    </div>
</body>
</html>